Testing your UX ideas with vibe coding 使用視覺化AI程式設計測試你的使用者體驗創意

Vibe coding是Andrej Karpathy創造的科技術語。它允許開發者和設計師透過AI提示來生成程式碼，無需手動程式設計。開發者可以減少工作量，設計師則能快速生成程式碼而無需依賴開發資源。

面向使用者體驗設計師的意境程式設計

這意味著UX設計師不能用它來生成可以直接上線的程式碼

• 快速製作原型來進行使用者測試

• 向團隊展示設計想法和互動效果

Vibe coding 是如何工作的？

用自然語言在提示中描述想要的想法或應用，然後讓AI為你構建程式碼——無需手動程式設計。開發人員可以使用任何LLM工具，如ChatGPT或Claude來進行意境程式設計。然後，輸入簡單的提示，比如"為大學生建立一個健康追蹤應用的儀表盤，使用豐富多彩、現代的配色和字型。"在獲得AI生成的初始程式碼後，開發人員會對其進行完善和測試，使其符合標準。

使用意境程式設計工具有兩種方式：一種是使用Bubble和Replit這樣的工具從提示開始，另一種是使用Anima Playground或Lovable這樣的工具從Figma設計開始（我們稍後會介紹這些與Figma整合的工具）。

Benefits and limitations 優勢與侷限性

意境程式設計的優勢：

• 快速迭代：加快設計概念的視覺化和驗證

• 減少依賴：無需等待開發資源即可建立演示

• 更多探索：能快速測試多個設計方案

意境程式設計的侷限性：

• 複雜度：難以處理複雜的多頁面互動

• 缺乏上下文：AI只能實現表層功能

• 程式碼質量：生成的程式碼需要專業開發人員審查修復

Best practices for vibe coding 最佳實踐

1. 使用具體且簡單的提示

• 提示應該只有1-2句話長

• 使用具體場景相關的語言以獲得更可預測的結果

• 優先考慮具體資訊，比如目標使用者群體和他們的總體目標

2. 儘可能從Figma開始

• 使用Figma外掛，例如Anima或Builder.io

• 將任何精細度的UI設計從Figma匯入AI代理作為參考

• 基於初始UI設計構建預期的互動和其餘應用程式部分

Anima的Figma外掛讓你能直接從設計中獲得可用程式碼

3. 拆分複雜任務

從向AI代理提交一個基礎請求開始

根據你對設計和功能的期望來完善輸出

為AI代理新增額外的構建標準（同時保持簡單性）

4. 將AI代理作為你的協作夥伴

耐心地進行多次迭代以獲得期望的結果，善用AI代理的對話特性，提供示例（如圖片、指令碼）作為參考

Anima中的Vibe coding演示

1. 將Figma設計匯入Anima Playground | Import Figma designs into Anima Playground

有兩種匯入方式：

I. 在Anima網站貼上Figma連結

可以在URL文字框下方選擇框架、UI庫、語言和樣式設定。

II. 使用Anima的Figma外掛

點選紫色的"Prompt in Playground"按鈕，自動匯入設計。選擇"Prompt in Playground"匯入Figma設計

2. 預覽和完善實時設計 | Review and refine the live preview

在Anima Playground中可以切換程式碼、預覽和Figma設計檢視。你可以修改按鈕效果、配色方案或響應式佈局等內容。

以下是我請求的兩處修改：

• 讓設計支援響應式佈局

• 點選"登入以新增"時顯示登入彈窗

在Anima Playground中預覽設計和互動。你可以用自然語言與AI對話，輕鬆獲得修改。

3. 在Anima釋出 | Publish in Anima

點選右上角"釋出"按鈕獲取可分享連結。

線上預覽連結可用於分享

注：程式碼下載和GitHub同步需付費

AI工具正在改變UX工作流程，讓設計師能快速將創意轉為程式碼。

設計師現在可以獨立建立演示原型，無需依賴開發團隊。

透過意境程式設計，任何設計師都能生成用於測試的演示版本。